<template>
  <div class="playListDetail">
    <!-- 歌单描述 -->
    <div class="playListInfo flex">
      <!-- 图片 -->
      <div class="cover-img-wrap">
        <img :src="curCoverUrl" alt="">
      </div>
      <!-- 歌单信息 -->
      <div class="info-wrap flex mgl-20">
        <div class="title">
          <span class="font-20 font-bold">{{ curPlayListName }}</span>
        </div>
        <div class="creator">{{ creator.nickname}}</div>
        <div class="btns">
          <button class="btn btn-red mgr-10">
            <i class="iconfont icon-bofang"></i>
            播放全部
          </button>
          <button class="btn mgr-10">
            <i class="el-icon-folder-checked"></i>
            已收藏
          </button>
          <button class="btn">
            <i class="iconfont icon-fenxiang"></i>
            分享
          </button>
        </div>
        <div class="tag">
          <span>标签: </span>
          <span v-for="(item,index) in tags" :key="index">{{ item }} </span>
        </div>
        <div class="songsInfo">
          <span>歌曲数:{{ trackCount }}&nbsp;&nbsp;&nbsp;</span>
          <span>播放次数:{{ playCount }}</span>
        </div>
        <div class="desc">简介: {{ playListDesc}}</div>
        <div class="unfold">△</div>
      </div>
    </div>
    <tab-menu :tabsMenuList="playListMenu" @tabsChange="tabsChange"></tab-menu>
    <songs-list :songs="curListSongs" :isShowAll="true" v-show="tabIndex === '0'"></songs-list>
    <comment-container v-show="tabIndex === '1'" :queryInfo="queryInfo" :isShowHot="false"></comment-container>
  </div>
</template>

<script>
import TabMenu from '@/components/TabMenu/tabMenu.vue'
import SongsList from '@/components/SongsList/songsList.vue'
import CommentContainer from '@/components/Comment/commentContainer.vue'
import { getPlayListSongs, getPlayListDynamic } from '@/api/playList.js'
// import { getHotComment, getComment } from '@/api/comment.js'
// , getPlayListAllSongs, getPlayListSubscribers, getRelatedPlayList
export default {
  data () {
    return {
      playListMenu: [{ name: '歌单列表' }, { name: '评论' }],
      // 当前歌单的歌曲
      curListSongs: [],
      // 当前歌单封面图的url
      curCoverUrl: '',
      // 当前歌单名字
      curPlayListName: '',
      // 歌单创建者,里面有昵称,头像的信息
      creator: '',
      // 播放次数
      playCount: 0,
      // 歌单歌曲数目
      trackCount: 0,
      // 歌单标签
      tags: [],
      // 歌单简介
      playListDesc: '',
      // 控制标签页切换
      tabIndex: '0',
      queryInfo: {
        id: this.$route.params.id,
        type: 2
      }
    }
  },
  created () {
    // 获取歌单歌曲并展示
    this.showPlayListSongs(this.$route.params.id)
    this.showPlayListDynamic(this.$route.params.id)
    // 监听歌单id的变化,官网是这样写的,叫做命令式监听,watch:{}那个叫watch选项,-----纠错,两个都是命令式操作,我百度了一些命令式,与之相关的还有声明式
    this.$watch(
      () => this.$route.params,
      (toParams, previousParams) => {
        // 对路由变化做出响应...
        // 获取歌单歌曲并展示
        this.showPlayListSongs(toParams.id, this.$store.state.cookie)
        this.showPlayListDynamic(toParams.id)
      }
    )
  },
  components: {
    TabMenu,
    SongsList,
    CommentContainer
  },
  methods: {
    // 获取歌单的歌曲
    async showPlayListSongs (id, cookie) {
      const res = await getPlayListSongs(id, cookie)
      // console.log(res)
      if (res.data.code !== 200) return this.$message.error('获取歌单失败')
      this.curListSongs = res.data.playlist.tracks
      this.curCoverUrl = res.data.playlist.coverImgUrl
      this.curPlayListName = res.data.playlist.name
      this.creator = res.data.playlist.creator
      this.playCount = res.data.playlist.playCount
      this.trackCount = res.data.playlist.trackCount
      this.tags = res.data.playlist.tags
      this.playListDesc = res.data.playlist.description
    },
    // 获取歌单的动态,如评论之类
    async showPlayListDynamic (id) {
      const res = await getPlayListDynamic(id)
      console.log('动态' + res)
    },
    tabsChange (index) {
      // tab标签切换
      this.tabIndex = index
    }

  }
}
</script>

<style lang="less" scoped>
.cover-img-wrap {
  width: 250px;
  height: 250px;
  img {
    width: 250px;
  }
}
.info-wrap {
  flex-direction: column;
  text-align: left;
  line-height: 30px;
}
</style>
